<template>
  <div>
    <Form
      v-slot="{ validate, values, setFieldValue, validateField,setFieldError }"
      class="form"
      :validation-schema="schema"
    >
      <div class="field">
        <label for="nickName"><span class="red">*</span>账号简称：</label>
        <Field name="nickName" class="input" placeholder="设置会员名" />
        <ErrorMessage name="nickName" class="errorMsg" />
      </div>

      <div class="field">
        <label for="password"><span class="red">*</span>登录密码：</label>
        <Field name="password" class="input"  type="password" placeholder="设置您的登录密码" />
        <ErrorMessage name="password" class="errorMsg" />
      </div>
      <div class="field">
        <label for="confirm_password"
          ><span class="red">*</span>密码确认：</label
        >
        <Field
          name="confirm_password"
          class="input"
          type="password"
          placeholder="请再次输入您的登录密码"
        />
        <ErrorMessage name="confirm_password" class="errorMsg" />
      </div>
      <div class="field">
        <label for="link_man"><span class="red">*</span>联系人姓名：</label>
        <Field name="link_man" class="input" placeholder="请输入真实姓名" />
        <ErrorMessage name="link_man" class="errorMsg" />
      </div>

      <div class="field">
        <label for="referral_code">推荐码：</label>
        <Field name="referral_code" placeholder="请输入推荐码" class="input" />
        <ErrorMessage name="referral_code" class="errorMsg" />
      </div>

      <div class="field">
        <label for="phone"><span class="red">*</span>手机号码：</label>
        <div class="phone-part">
          <div class="phone-tips">
            中国大陆&nbsp;+86&nbsp;
            <div class="icon">
              <img v-lazy="publicUrl(`/images/pull-down.png`)" />
            </div>
          </div>
          <Field
            name="phone"
            class="phone-text"
            placeholder="请输入您的手机号码"
          />
          <ErrorMessage name="phone" class="errorMsg" />
        </div>
      </div>

      <div class="field">
        <label for="captcha"><span class="red">*</span>验证码：</label>

        <Field name="captcha" placeholder="请输入您的验证码" v-slot="{ field }">
          <div class="input">
            <input
              v-bind="field"
              type="input"
              placeholder="请输入验证码"
              class="input-tag"
            />
            <div class="else-button">
              <Button
                v-show="cooling === 0"
                class="thumb"
                v-debounce="() => getCode(validateField)"
                :color="`#C71D32`"
                :size="`14px`"
                :loading="loading.getCode"
                >获取验证码</Button
              >
              <Button
                v-show="cooling > 0"
                :background="`white`"
                class="thumb get-code"
                :color="`#C71D32`"
                :size="`.0729rem`"
                >{{ cooling }}&nbsp;重新获取</Button
              >
            </div>
          </div>
        </Field>
        <ErrorMessage name="captcha" class="errorMsg" />
      </div>

      <div class="field">
        <div
          class="business-license thumb business-license-first"
          title="请上传身份证人像面"
          @click="()=>uploads(setFieldValue, validateField,setFieldError,'people')"
        >
          <Field name="people" v-slot="{ field }">
            <img v-lazy="publicUrl(`/images/people.png`)" />

            <div class="uploadIcon">
              <div class="photo">
                <img v-lazy="publicUrl(`/images/photo.png`)" />
              </div>
              <div class="text">请上传身份证人像面</div>
            </div>
            <div class="permit" v-show="field.value">
              <img v-lazy="(field.value as string)" />
            </div>
          </Field>
          <ErrorMessage name="people" class="people-error" />
        </div>

        <div
          class="business-license thumb"
          title="请上传营业执照"
          @click="()=>uploads(setFieldValue, validateField,setFieldError,'emblem')"
        >
          <Field name="emblem" v-slot="{ field }">
            <img v-lazy="publicUrl(`/images/people-reverse.png`)" />
            <div class="uploadIcon" v-show="image === ''">
              <div class="photo">
                <img v-lazy="publicUrl(`/images/photo.png`)" />
              </div>
              <div class="text">请上传身份证国徽面</div>
            </div>

            <div class="permit" v-show="field.value">
              <img  v-lazy="(field.value as string)" />
            </div>
          </Field>
          <ErrorMessage name="emblem" class="people-error" />
        </div>
      </div>
      <div class="field center">
        <Field name="agreement">
          <input
            type="checkbox"
            class="checkbox thumb"
            @change="($event)=>checkboxChange($event, setFieldValue, validateField)"
          />
        </Field>
        <span class="tips"
          ><span class="tips-one">创建网站账号的同时，我同意遵守:</span
          ><span class="tips-two thumb" @click="()=>showDialog(`《云裁服务条款》`)">《云裁服务条款》</span
          ><span class="tips-one">及</span
          ><span class="tips-two thumb" @click="()=>showDialog(`隐私声明`)">《隐私声明》</span>
        </span>
        <ErrorMessage
          name="agreement"
          class="errorMsg"
          style="margin-left: 10px"
        />
      </div>

      <Button
        class="button thumb"
        color="white"
        background="#232481"
        size=".0833rem"
        @click="()=>submit(validate, values)"
        >同意并注册</Button
      >
    </Form>
  </div>
</template>
<script setup lang="ts" name="man-register">
import { ref, reactive } from "vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import { publicUrl, validateRule } from "@/utils/util";
import { fileToBase64Async } from "@/utils/util";
import Button from "@/components/Button/index.vue";
import getFile from "@/utils/getFile";
import { manRegister as getSmsCode } from "@/api/modules/getCode";
import * as yup from "yup";
interface Loading {
  getCode: boolean;
}
const loading = reactive<Loading>({
  getCode: false,
});

const schema = yup.object().shape({
  nickName: yup
    .string()
    .required("账号简称不为空")
    .max(20, "最多为20个字符"),
  password: yup
    .string()
    .required("登录密码不为空")
    .min(5, "至少为5个字符")
    .max(20, "最多为20个字符"),
  confirm_password: yup
    .string()
    .required("确认密码不为空")
    .min(5, "至少为5个字符")
    .max(20, "最多为20个字符")
    .oneOf([yup.ref("password"), null], "密码不一致"),
  link_man: yup
    .string()
    .required("联系人姓名不为空")
    .max(20, "最多为20个字符"),

  referral_code: yup
    .string()
    .required("推荐码不为空")
    .length(5, "必须为5个字符"),
  captcha: yup.string().required("验证码不为空").length(5, "必须为5个字符"),
  phone: yup
    .string()
    .required("手机号码不为空")
    .matches(validateRule(`phone`), "请输入正确的手机号"),

  people: yup.string().required("请上传身份证人像面"),
  emblem: yup.string().required("请上传身份证国徽面"),

  agreement: yup.boolean().required("请勾选协议").isTrue("请勾选协议"),
});

const image = ref<string>("");
const checkboxChange = (
  params: any,
  setFieldValue: any,
  validateField: any
) => {
  setFieldValue("agreement", params.target.checked);
  validateField("agreement");
};

const submit = async (validate: any, values: any) => {
  console.log(await validate());
};

const showFunc = ()=>{
  // Layer.success("我是成功提示消息");
}

const cooling = ref<number>(0);

const reduceFunc = () => {
  setTimeout(() => {
    cooling.value--;
    if (cooling.value >= 1) reduceFunc();
  }, 1000);
};

/**
 * 获取验证码
 */
const getCode = async (validateField: any) => {
  const { valid } = await validateField("phone");
  if (!valid) return;
  loading.getCode = true;
  await getSmsCode();
  cooling.value = 60;
  reduceFunc();
  loading.getCode = false;
};

const uploads = (setFieldValue: any, validateField: any,setFieldError:any,key:string) =>
  getFile("image", undefined, {
    successResult: (file: File) =>
      fileToBase64Async(file).then((res) => {
        setFieldValue(key, res as string);
        validateField(key);
      }),
      errorResult(msg:string) {
        setFieldError(key,msg)
      },
  });
  const emits = defineEmits<{
  (event: "showDialog", openMsg: { title: string }): void;
}>();

  const showDialog = (title: string) => {
  emits("showDialog", { title: title });
 };
</script>
<style scoped lang="scss">
@import "../form.scss";

</style>
